<template>
  <view class="components-form">
    
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>企业认证</tn-nav-bar>
    
    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <dynamic-demo-template ref="demoTemplate" :full="true" :fullWindowsScroll="true" @click="click">
        <tn-form :model="model" ref="form" errorType="message" labelPosition="top" labelWidth=140 labelAlign="left">
		  <tn-form-item label="企业名称" prop="name" leftIcon="identity" :required="true" labelPosition="top" labelAlign="left">
            <tn-input :disabled="verfiy==1 || verfiy==0" v-model="model.name" type="text" placeholder="请输入企业名称" :border="false"></tn-input>
          </tn-form-item>
		  <tn-form-item label="法人" prop="legalPerson" leftIcon="identity" :required="true" labelPosition="top" labelAlign="left">
		    <tn-input :disabled="verfiy==1 || verfiy==0" v-model="model.legalPerson" type="text" placeholder="请输入法人" :border="false"></tn-input>
		  </tn-form-item>
		  <tn-form-item label="企业地址" prop="address" leftIcon="identity" :required="true" labelPosition="top" labelAlign="left">
		    <tn-input :disabled="verfiy==1 || verfiy==0" v-model="model.address" type="text" placeholder="请输入企业地址" :border="false"></tn-input>
		  </tn-form-item>
          <tn-form-item label="统一征信代码" prop="creditCode" leftIcon="identity" :required="true" labelPosition="top" labelAlign="left">
            <tn-input :disabled="verfiy==1 || verfiy==0" v-model="model.creditCode" type="text" placeholder="请输入统一征信代码" :border="false"></tn-input>
          </tn-form-item>
		  <tn-form-item label="纳税人识别号" prop="taxNumber" leftIcon="identity" :required="true" labelPosition="top" labelAlign="left">
		    <tn-input :disabled="verfiy==1 || verfiy==0" v-model="model.taxNumber" type="text" placeholder="请输入纳税人识别号" :border="false"></tn-input>
		  </tn-form-item>
		  <tn-form-item label="工商注册号" prop="registerNumber" leftIcon="identity" :required="true" labelPosition="top" labelAlign="left">
		    <tn-input :disabled="verfiy==1 || verfiy==0" v-model="model.registerNumber" type="text" placeholder="请输入工商注册号" :border="false"></tn-input>
		  </tn-form-item>
		  
          <tn-form-item v-if="verfiy==999 || verfiy==2" label="营业执照" prop="images1List" :required="true" labelPosition="top" labelAlign="left">
			<tn-image-upload
				ref="imageUpload1"
				:fileList="model.images1List"
				:maxCount="1"
				@on-success="uploadSuccess1"
				@on-error="uploadError1"
				@on-list-change="imageUploadChange1">
			</tn-image-upload>
          </tn-form-item>
		  <tn-form-item v-if="verfiy==999 || verfiy==2" label="税务登记证" prop="images2List" :required="true" labelPosition="top" labelAlign="left">
		    <tn-image-upload
		    	ref="imageUpload2"
		    	:fileList="model.images2List"
		    	:maxCount="1"
		    	@on-success="uploadSuccess2"
		    	@on-error="uploadError2"
		    	@on-list-change="imageUploadChange2">
		    </tn-image-upload>
		  </tn-form-item>
		  <tn-form-item v-if="verfiy!=999" label="审核意见"  leftIcon="identity" labelPosition="top" labelAlign="left">
		    <tn-tag  v-if="verfiy==0" backgroundColor="#82B2FF" fontColor="#080808">审核中</tn-tag>
		    <tn-tag  v-if="verfiy==1" backgroundColor="#24F083" fontColor="#080808">审核成功</tn-tag>
		    <tn-tag  v-if="verfiy==2" backgroundColor="#FF7043" fontColor="#080808">审核失败</tn-tag>
		  	<tn-input disabled v-model="verfiyInfo" type="text" :border="false"></tn-input>
		  </tn-form-item>
        </tn-form>
        <tn-button v-if="verfiy==999 || verfiy==2" backgroundColor="#01BEFF" fontColor="#FFFFFF" width="100%" @click="submit">{{tips}}</tn-button>
      </dynamic-demo-template>
      
    </view>
    
  </view>
</template>

<script>
  import  store from '@/store'
  import {addEnterprise,getEnterpriseInfo} from '@/api/auth.js'
  import config from '@/api/config'; 
  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
  export default {
    name: 'componentsForm',
    components: {dynamicDemoTemplate},
    data() {
      return {
		verfiy:999,
		verfiyInfo:"",
		tips:"提交",
        model: {
		  id:null,
          name: '',
          address: '',
          creditCode: '',
		  taxNumber:'',
		  registerNumber:'',
		  legalPerson:'',
		  images1List:[],
		  images1:'',
		  images2:'',
		  images2List:[]
        },
        rules: {
          name: [
            {
              required: true,
              message: '请输入企业名称',
              trigger: 'blur'
            },
            {
            	min: 3,
            	max: 50,
            	message: '长度在3到50个字符',
            	trigger: ['change','blur'],
            },
          ],
          address: [
            {
              required: true,
              message: '请输入企业地址',
              trigger: 'blur'
            },
            {
            	min: 3,
            	max: 50,
            	message: '长度在3到50个字符',
            	trigger: ['change','blur'],
            },
          ],
		  legalPerson:[
            {
              required: true,
              message: '请输入法人',
              trigger: 'blur'
            },
            {
            	min: 3,
            	max: 10,
            	message: '长度在3到10个字符',
            	trigger: ['change','blur'],
            },
            {
            	// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
            	validator: (rule, value, callback) => {
            		return this.$t.test.chinese(value);
            	},
            	message: '必须为中文',
            	// 触发器可以同时用blur和change，二者之间用英文逗号隔开
            	trigger: ['change','blur'],
            },
          ],
          creditCode: [
            {
              required: true,
              message: '请输入统一征信代码',
              trigger: 'blur'
            },
            {
            	min: 18,
            	max: 18,
            	message: '统一征信代码长度在18个字符',
            	trigger: ['change','blur'],
            },
            {
            	// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
            	validator: (rule, value, callback) => {
            		return this.$t.test.creditCode(value);
            	},
            	message: '统一征信代码格式错误',
            	trigger: ['change','blur'],
            },
          ],
		  taxNumber: [
            {
              required: true,
              message: '请输入纳税人识别号',
              trigger: 'blur'
            },
            {
            	min: 15,
            	max:20,
            	message: '纳税人识别号长度在15-20个字符',
            	trigger: ['change','blur'],
            },
            {
            	// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
            	validator: (rule, value, callback) => {
            		return this.$t.test.taxNumber(value);
            	},
            	message: '纳税人识别号格式错误',
            	trigger: ['change','blur'],
            },
          ],
		  registerNumber: [
            {
              required: true,
              message: '请输入工商注册号',
              trigger: 'blur'
            },
            {
            	min: 15,
            	max:18,
            	message: '工商注册号长度在15-18个字符',
            	trigger: ['change','blur'],
            },
            {
            	// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
            	validator: (rule, value, callback) => {
            		return this.$t.test.registerNumber(value);
            	},
            	message: '工商注册号格式错误',
            	trigger: ['change','blur'],
            },
          ],
          images1List: [
            {
              required: true,
              message: '请选择图片',
              trigger: ['change','blur'],
              type: 'array'
            }
          ],
		  images2List: [
		    {
		      required: true,
		      message: '请选择图片',
		      trigger: ['change','blur'],
		      type: 'array'
		    }
		  ],
        }
      }
    },
	created() {
		this.enterpriseInfo()
	},
	mounted() {
		this.$refs.form.setRules(this.rules)
		if(this.$refs.imageUpload1){
		  this.$refs.imageUpload1.action = config.BASE_URL+"/uploadImage"
		  this.$refs.imageUpload1.header = {
			  'Authorization': store.state.vuex_token
		  }
		}
		if(this.$refs.imageUpload2){
		  this.$refs.imageUpload2.action = config.BASE_URL+"/uploadImage"
		  this.$refs.imageUpload2.header = {
			  'Authorization': store.state.vuex_token
		  }
		}
	},
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      click(event) {
        this[event.methods] && this[event.methods](event)
      },
	  uploadSuccess1(data, currentIndex, lists, index) {
	    console.log('文件上传成功', data, currentIndex, lists, index);
		this.model.images1 = data.path
	  },
	  uploadError1(err, currentIndex, lists, index) {
	    console.log('文件上传失败', err, currentIndex, lists, index);
		this.$refs.imageUpload1.clear()
		this.model.images1List=[]
	  },
	  uploadSuccess2(data, currentIndex, lists, index) {
	    console.log('文件上传成功', data, currentIndex, lists, index);
	  		this.model.images2 = data.path
	  },
	  uploadError2(err, currentIndex, lists, index) {
	    console.log('文件上传失败', err, currentIndex, lists, index);
	  		this.$refs.imageUpload1.clear()
	  		this.model.images2List=[]
	  },
      // 表单提交
      submit() {
		console.log(this.$refs.form)
        this.$refs.form.validate(valid => {
		  console.log('---------------',valid)
          if (valid) {
            // 验证通过
			addEnterprise(this.model).then(res=>{
				 this.$t.message.toast('提交成功')
				 uni.navigateTo({
					url: '/pages/index?index=3',
				 });
			}).catch(err=>{
				console.log(err)
				this.$t.message.toast(err.data.message)	 			 
			})

          } else {
            // 验证失败
			this.$t.message.toast('请正确填写表单信息')
          }
        })
      },
      // 图片有修改
      imageUploadChange1(lists) {
        this.model.images1List = lists
      },
	  imageUploadChange2(lists) {
	    this.model.images2List = lists
	  },
	  enterpriseInfo(){
	   getEnterpriseInfo().then(res=>{
		 if(res){
			 this.model.id=res.id
			 this.model.legalPerson=res.legalPerson
			 this.model.registerNumber=res.registerNumber
			 this.model.taxNumber=res.taxNumber
			 this.model.creditCode=res.creditCode
			 this.model.address=res.address
			 this.model.name=res.name
			 this.verfiy=res.verfiy
			 this.verfiyInfo=res.verfiyInfo
			 if(res.verfiy==2){
				 this.tips="重新认证"
			 }
		 }
	   }).catch(err=>{
		this.$t.message.toast(err.data.message)	 			 
	   })
	  },
    }
  }
</script>

<style lang="scss" scoped>
  
  .agreement {
    display: flex;
    align-items: center;
    margin: 40rpx 0;
    
    &-text {
      padding-left: 8rpx;
      color: $tn-font-sub-color;
    }
  }
  
</style>
